<template>
    <div>
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="pageType == 'look'">
            <el-form-item label="引流员工" prop="user_list">
                <div class="form-staffs">
                    <div class="staffs">
                        <el-tag
                            v-for="item in creators"
                            :key="item.name"
                            class="staffs_item"
                            :closable="pageType !== 'look'"
                            :type="item.id"
                            @close="handleClose(item)">
                            {{ item.name }}
                        </el-tag>
                    </div>
                </div>
                <el-button size="small" class="select-staffs" @click="openDepart">选择成员</el-button>
            </el-form-item>
            <el-form-item label="欢迎语设置">
                <el-switch v-model="formData.welcome_switch" :active-value="1" :inactive-value="2"
            /></el-form-item>
            <el-form-item>
                <template v-if="formData.welcome_switch == 1">
                    <el-radio-group v-model="formData.welcome.type">
                        <el-radio :label="1">新建欢迎语</el-radio>
                        <el-radio :label="3">已有欢迎语</el-radio>
                    </el-radio-group>
                    <div v-if="formData.welcome.type == 3">
                        <el-button size="small" @click="onWelcome">选择已有欢迎语</el-button>
                    </div>
                </template>
            </el-form-item>
            <template v-if="formData.welcome_switch == 1">
                <el-form-item prop="welcome.content">
                    <div class="container">
                        <el-input
                            v-model="formData.welcome.content"
                            :rows="6"
                            type="textarea"
                            placeholder="请输入欢迎语"
                            class="content_input"
                            @input="onName" />
                        <div class="text_btn">
                            <span style="cursor: pointer" @click="onNickName">插入客户昵称</span>
                            <span
                                style="margin: 0 6px 0 18px; color: #33302d; cursor: pointer"
                                @click="onOpenMaterial('1')"
                                >选择文本</span
                            >
                            <span style="cursor: pointer" @click="emojiVisible = !emojiVisible">😊</span>
                            <span style="margin-left: 356px">{{ formData.welcome.content.length }}/1000</span>
                        </div>
                        <!-- 表情管理 -->
                        <div class="emoj_box">
                            <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
                        </div>
                        <!-- 文件信息 -->
                        <el-scrollbar class="upload_list_box" max-height="230px">
                            <ul class="upload_list">
                                <li v-for="item in fileInfo" :key="item.id" class="upload_item">
                                    <img class="file_icon" :src="item.cur_icon" alt="" />
                                    <div class="file_name">{{ item.name }}</div>
                                    <img
                                        class="del_icon"
                                        src="@/assets/image/channel/remove_icon.png"
                                        @click="onRemove(item.id)" />
                                </li>
                            </ul>
                        </el-scrollbar>
                        <!-- 选择素材 -->
                        <el-popover placement="top-start" popper-class="pop_select_box" :width="300" trigger="hover">
                            <template #reference>
                                <div class="text_hover">
                                    <span style="font-size: 22px; margin-right: 5px">+</span>
                                    添加图片/视频/音频/文件/链接/抽奖/收集表/电商
                                </div>
                            </template>
                            <template #default>
                                <div class="upload_pop">
                                    <div
                                        v-for="item in uploadList"
                                        :key="item.id"
                                        class="item_pop"
                                        @click="onOpenUpload(item.id)">
                                        <img class="item_pop_icon" :src="item.icon" alt="" />
                                        <span class="item_pop_name">{{ item.name }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-popover>
                        <!-- 欢迎语预览 -->
                        <div class="prev_box">
                            <div class="phone_con">
                                <span class="phone-title">欢迎语预览</span>
                                <el-scrollbar class="phone_List">
                                    <div class="bg_friend">
                                        <div class="public_time">
                                            {{ DFormat(new Date(), 'yyyy-MM-dd hh:mm') }}
                                        </div>

                                        <div v-for="item in fileList" :key="item.id" class="user_con">
                                            <img class="user_avator" src="/static/user.png" alt="" />
                                            <div class="friend_main">
                                                <div class="user_name">{{ item.user_name || '张三' }}</div>
                                                <!--欢迎语-->
                                                <template v-if="item.type == 0">
                                                    <div class="welcomeWords">{{ item.content }}</div>
                                                </template>
                                                <!-- 图片 -->
                                                <template v-else-if="item.type == 1">
                                                    <el-image
                                                        class="send_image"
                                                        :src="item.absolute_url"
                                                        alt=""
                                                        fit="cover">
                                                        <template #error>
                                                            <el-image
                                                                class="send_image"
                                                                src="/static/file/pic.png"
                                                                alt=""></el-image>
                                                        </template>
                                                    </el-image>
                                                </template>
                                                <!-- 音频 -->
                                                <template v-else-if="item.type == 4">
                                                    <div class="user_file">
                                                        <div class="user_file_main">
                                                            <div class="user_file_desc">{{ item.title }}</div>
                                                            <el-image
                                                                :src="item.cur_icon"
                                                                alt=""
                                                                class="user_file_icon"
                                                                fit="cover"></el-image>
                                                        </div>
                                                        <div class="user_file_size">
                                                            {{
                                                                item.file_size
                                                                    ? (item.file_size / 1024 / 1024).toFixed(2) + ' M'
                                                                    : ''
                                                            }}
                                                        </div>
                                                    </div>
                                                </template>
                                                <!-- 视频 -->
                                                <template v-else-if="item.type == 2">
                                                    <div class="video_list">
                                                        <el-image
                                                            class="video_image"
                                                            :src="item.thumbnail_url"
                                                            alt=""
                                                            fit="cover">
                                                            <template #error>
                                                                <el-image
                                                                    class="video_image"
                                                                    src="/static/file/mov.png"
                                                                    alt=""></el-image>
                                                            </template>
                                                        </el-image>
                                                        <el-image
                                                            class="video_play"
                                                            src="/static/play.png"
                                                            alt=""
                                                            fit="cover"></el-image>
                                                    </div>
                                                </template>
                                                <!-- 文件 -->
                                                <template v-else-if="item.type == 5">
                                                    <div class="user_file">
                                                        <div class="user_file_main">
                                                            <div class="user_file_desc">{{ item.title }}</div>
                                                            <el-image
                                                                :src="getSuffixIcon(item.name)"
                                                                alt=""
                                                                class="user_file_icon"
                                                                fit="cover"></el-image>
                                                        </div>
                                                        <!-- <div class="user_file_size">
              {{ (item?.mediaFileInfo.size / 1024 / 1024).toFixed(2) }}M
            </div> -->
                                                    </div>
                                                </template>
                                                <!-- 链接 -->
                                                <template v-else-if="item.type == 3">
                                                    <div class="user_link">
                                                        <div class="user_link_tit">{{ item.title }}</div>
                                                        <div class="user_link_main">
                                                            <div class="user_link_desc">{{ item.content }}</div>
                                                            <el-image
                                                                :src="item.cover_image_url"
                                                                alt=""
                                                                class="user_link_icon"
                                                                fit="cover">
                                                                <template #error>
                                                                    <el-image
                                                                        class="user_link_icon"
                                                                        src="/static/file/pic.png"
                                                                        alt=""></el-image>
                                                                </template>
                                                            </el-image>
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </template>

            <div style="text-align: center; border-top: 1px solid #d9d9d9; margin-bottom: 16px"></div>
            <el-form-item label="活动图文" prop="link_img">
                <div class="img_box">
                    <div>图文封面</div>
                    <UploadImg
                        :rule="{
                            type: 'jpg|JPG|jpeg|JPEG|png|PNG',
                            unit: 'MB',
                            size: 2
                        }"
                        :url="formData.link_img"
                        @submit="v => (formData.link_img = v)" />
                    <div class="text">(图片大小不超过2M，支持JPG，JPEG格式。建议尺寸200*200)</div>
                </div>
            </el-form-item>
            <div style="width: 780px">
                <el-form-item label="活动标题" label-width="190px" prop="link_title">
                    <el-input v-model="formData.link_title" placeholder="呼朋唤友, 免费拿奖品" />
                </el-form-item>
                <el-form-item label="填写描述" label-width="190px" prop="link_desc">
                    <el-input
                        v-model="formData.link_desc"
                        maxlength="150"
                        show-word-limit
                        :rows="4"
                        type="textarea"
                        placeholder="好友，你可以给我打个call吗？"
                        class="content_input" />
                </el-form-item>
            </div>
            <el-form-item label="已领红包客户打标" label-width="130px">
                <div>
                    <el-tag
                        v-for="tag in AllTags"
                        :key="tag"
                        class="mx-1"
                        size="small"
                        type="warning"
                        style="margin-right: 5px"
                        :closable="pageType !== 'look'"
                        @close="onClose1(tag)">
                        {{ tag.name }}
                    </el-tag>
                </div>
                <el-button size="small" @click="selecTag">选择标签</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 素材弹框 -->
    <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getFiles" />
    <!-- 已有欢迎语弹框 -->
    <Dialog :app-dialog="appDialog">
        <el-table
            ref="multipleTable"
            :data="tableData"
            stripe
            height="580"
            style="width: 100%"
            header-row-class-name="table_header_title"
            highlight-current-row
            @current-change="handleCurrentChange">
            <el-table-column width="55">
                <template #default="scope">
                    <el-radio v-model="seleItem.id" :label="scope.row.id"
                        ><span style="font-size: 0">''</span></el-radio
                    >
                </template>
            </el-table-column>
            <el-table-column prop="content" label="欢迎语" min-width="220">
                <template #default="scope">
                    <span class="text">{{ scope.row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="welcome_friend_attachment" min-width="200">
                <template #default="scope">
                    <template v-for="v in scope.row.welcome_friend_attachment" :key="v.id">
                        <!-- // 图片 -->
                        <el-tooltip
                            v-if="v.type === 1"
                            :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'"
                            placement="top"
                            effect="light">
                            <el-image
                                class="wel_content_file_item"
                                :src="v.media_file.absolute_url || '/static/file/pic.png'"
                                :preview-src-list="bigImgList"
                                :preview-teleported="true"
                                :initial-index="1"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                @click="BigImage(v.media_file.absolute_url)">
                                <template #error>
                                    <img style="width: 40px; height: 40px" src="/static/file/pic.png" alt="" />
                                </template>
                            </el-image>
                        </el-tooltip>
                        <!-- 视频 -->
                        <el-tooltip v-if="v.type === 2" :content="v.media_file.name" placement="top" effect="light">
                            <div class="pay-item" @click="downLoad(v.media_file.absolute_url)">
                                <div class="play"></div>
                                <el-image
                                    class="wel_content_file_item"
                                    :src="v.media_file.absolute_url || '/static/file/pic.png'"
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                    <template #error>
                                        <el-image src="/static/file/mov.png" alt=""></el-image>
                                    </template>
                                </el-image>
                            </div>
                        </el-tooltip>
                        <!-- 链接 -->
                        <el-tooltip
                            v-if="v.type === 3"
                            :content="v.link_title || '暂无标题'"
                            placement="top"
                            effect="light">
                            <img
                                class="wel_content_file_item"
                                src="/static/file/link.png"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                        </el-tooltip>
                        <!-- 音频 -->
                        <el-tooltip
                            v-if="v.type === 4"
                            :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'"
                            placement="top"
                            effect="light">
                            <img
                                class="wel_content_file_item"
                                src="/static/file/mp3.png"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                @click="downLoad(v.media_file.absolute_url)" />
                        </el-tooltip>
                        <!-- 文件 -->
                        <el-tooltip
                            v-if="v.type === 5"
                            :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'"
                            placement="top"
                            effect="light">
                            <img
                                class="wel_content_file_item"
                                :src="getSuffixIcon(v.media_file.name)"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                @click="downLoad(v.media_file.absolute_url)" />
                        </el-tooltip>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="send_times" label="消息数量" width="125"> </el-table-column>
            <!-- 部门、员工 -->
            <el-table-column prop="depart" label="生效部门、员工" min-width="150">
                <template #default="scope">
                    <div class="depart_main">
                        {{
                            scope.row.department.length > 0 ? getSetionId('name', scope.row.department).join('、') : ' '
                        }}
                        {{ scope.row.work_user.length > 0 ? getSetionId('name', scope.row.work_user).join('、') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="user_name" label="创建人" min-width="150"></el-table-column>
            <el-table-column prop="user_local_department" label="所在部门" min-width="150">
                <template #default="scope">
                    <span>{{
                        scope.row.user_local_department && scope.row.user_local_department.length > 0
                            ? getSetionId('name', scope.row.user_local_department).join('、')
                            : '--'
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" min-width="200"></el-table-column>
            <el-table-column prop="updated_at" label="修改时间" min-width="200"></el-table-column>
            <template #empty>
                <el-empty :image-size="150" description="您还没有创建欢迎语">
                    <template #image>
                        <img src="/static/noBind.png" alt="" />
                        <el-button
                            type="primary"
                            size="small"
                            @click="router.push('/channel/qwbasicoperation/welcomefriend/addWelcomFriend')"
                            >创建欢迎语</el-button
                        >
                    </template>
                </el-empty>
            </template>
        </el-table>
        <ZWPagination ref="PaginationRef" @submit="getChannelFriendList" />
    </Dialog>
    <!-- 选择部门员工弹框 -->
    <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
    <!-- 客户标签 -->
    <BatchLabel ref="BatchLabelRef" @save="getTags" />
</template>

<script setup lang="ts">
import UploadImg from '@/view/smartMarketing/components/UploadImg.vue';
import BatchLabel from '@/components/BatchLabel.vue';
import ZWDepart from '@/components/ZWDepart.vue';
import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from '@/store';
import { DFormat, getSetionId, IsNotEmpty, getSuffixIcon } from '@/utils/utils';
import ZWMatericalLib from '@/components/channel/ZWMatericalLib.vue';
import ZWEmoji from '@/components/ZWEmoji.vue';
import Dialog from '@/components/Dialog.vue';
import { channelFriendList } from '@/api/channel/qwbase';
import { uploadFile2 } from '@/api/common';
import { deepCopy } from '@/utils/helper';
interface Props {
    pageType: any;
}
const props = withDefaults(defineProps<Props>(), {
    pageType: ''
});
const router = useRouter();
const store = useStore();
const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' },
    { id: '7', icon: '/static/file/wbgg.png', name: '抽奖' },
    { id: '8', icon: '/static/file/form.png', name: '收集表' },
    { id: '9', icon: '/static/file/shop.png', name: '电商' }
]);
const onURL = (data: any) => {
    const fileTYpe = {
        '.pdf': '/static/file/pdf.png',
        '.doc': '/static/file/doc.png',
        '.docx': '/static/file/doc.png',
        '.xls': '/static/file/xls.png',
        '.xlsx': '/static/file/xls.png',
        '.ppt': '/static/file/ppt.png',
        '.pptx': '/static/file/ppt.png'
    };
    if (data) {
        const last = data.substring(data.lastIndexOf('.'));
        return fileTYpe[last] || '/static/file/file.png';
    }
};
const formRef = ref<FormInstance>();
const DepartRef: any = ref<null | HTMLElement>(null); // 部门弹框类型
const ZWMatericalLibRef: any = ref(null);
const BatchLabelRef: any = ref<null | HTMLElement>(null); // 选择标签弹框
const emojiVisible = ref(false);
const fileList = ref([]);
const fileInfo = ref([]);
const creators = ref([]); // 创建人options
const AllTags = ref([]); // 选择标签options
const formData = ref({
    user_list: [],
    welcome_switch: 1,
    welcome: {
        type: 1,
        content: '',
        attachment: [],
        local_link: [],
        local_content: []
    },
    link_img: '',
    link_title: '',
    link_desc: '',
    tag_list: []
});
const rules = reactive({
    user_list: [{ required: true, message: '请选择引流员工', trigger: 'change' }],
    link_img: [{ required: true, message: '请选择图文封面', trigger: 'change' }],
    link_title: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
    link_desc: [{ required: true, message: '请输入活动描述', trigger: 'blur' }],
    'welcome.content': [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
});

//更改欢迎语
const onName = () => {
    fileList.value[0] = {
        type: 0,
        content: formData.value.welcome.content
    };
};
//打开新建选择人
const openDepart = () => {
    DepartRef.value.departVisble = true;
    DepartRef.value.selectedMember = creators.value;
};
// 获取部门成员
const getDepart = (res: any) => {
    creators.value = res;
    formData.value.user_list = getSetionId('id', creators.value);
};
// 员工数据
const tags = reactive([]);
// 员工移除
const handleClose = (tag: any) => {
    creators.value = creators.value.filter((item: any) => item.id !== tag.id);
    formData.value.user_list = getSetionId('id', creators.value);
    DepartRef.value.removeItem(tag);
};
// 打开选择标签
const selecTag = () => {
    BatchLabelRef.value.hasConditiion = false;
    BatchLabelRef.value.dialogData.labelChooseType = 2;
    BatchLabelRef.value.chooseDataArr = [...AllTags.value];
    BatchLabelRef.value.dialogVisible = true;
};
// 获取标签
const getTags = (data: any) => {
    AllTags.value = data.data;
    formData.value.tag_list = getSetionId('id', data.data);
};
// 移除标签
const onClose1 = (tag: any) => {
    AllTags.value = AllTags.value.filter(item => item.id != tag.id);
    formData.value.tag_list = getSetionId('id', AllTags.value);
};
// 插入名字
const onNickName = () => {
    if (props.pageType == 'look') return;
    formData.value.welcome.content += '##客户姓名## ';
    fileList.value[0] = {
        type: 0,
        content: formData.value.welcome.content
    };
};
//表情包管理
const chooseEmoji = (emoji: any) => {
    //事件。数据包含文本区域的值
    if (props.pageType == 'look') return;
    formData.value.welcome.content = formData.value.welcome.content + emoji;
    fileList.value[0] = {
        type: 0,
        content: formData.value.welcome.content
    };
    emojiVisible.value = false;
};
//打开素材上传框
const onOpenMaterial = (num: string) => {
    if (props.pageType == 'look') return;
    ZWMatericalLibRef.value.materVisible = true;
    ZWMatericalLibRef.value.baseId = num; //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length); //打开对应的基础素材
};
//获取素材
const getFiles = (res: any) => {
    if (res.data.length + formData.value.welcome.attachment.length > 8) {
        ElMessage.error('最多只能上传8个素材,请删除后再上传');
        return;
    }
    if (res.local) {
        // 链接
        if (res.type == 6) {
            // 对象浅
            const { code, content, cover_image_url, link_desc, link_url, title } = JSON.parse(
                JSON.stringify(res.data[0] || {})
            );
            formData.value.welcome.local_link.push({
                link_title: title,
                link_url: link_url,
                link_decs: link_desc,
                link_share_image: cover_image_url
            });
            // formData.value.welcome.local_content.push({ code: code, type: 3 })
            fileList.value.push({ id: code, ...res.data[0], type: 3 });
            fileInfo.value.push({
                id: code,
                cur_icon: '/static/file/link.png',
                name: res.data[0].title
            });
        } else {
            //  拷贝对象
            const { code, name, url } = JSON.parse(JSON.stringify(res.data[0] || {}));
            if (res.type == 2) {
                fileList.value.push({ id: code, absolute_url: url, type: 1 });
                formData.value.welcome.local_content.push({ code: code, type: 1 });
                fileInfo.value.push({ id: code, cur_icon: '/static/file/pic.png', name: name });
            }
            if (res.type == 3) {
                fileList.value.push({ id: code, absolute_url: url, type: 4 });
                formData.value.welcome.local_content.push({ code: code, type: 4 });
                fileInfo.value.push({ id: code, cur_icon: '/static/file/mp3.png', name: name });
            }
            if (res.type == 4) {
                fileList.value.push({
                    id: code,
                    absolute_url: url,
                    type: 2,
                    thumbnail_url: `${url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
                });
                formData.value.welcome.local_content.push({ code: code, type: 2 });
                fileInfo.value.push({ id: code, cur_icon: '/static/file/mov.png', name: name });
            }
            if (res.type == 5) {
                fileInfo.value.push({ id: code, cur_icon: onURL(url), name: name });
                fileList.value.push({ id: code, absolute_url: url, type: 5, ...res.data[0] });
                formData.value.welcome.local_content.push({ code: code, type: 5 });
            }
        }
    } else {
        // 文本
        if (res.type == 1) {
            const arr = [...new Set(res.data)];
            arr.forEach((item: any) => {
                formData.value.welcome.content += item.title;
                fileList.value[0] = {
                    type: 0,
                    content: formData.value.welcome.content
                };
            });
        }
        // 图片
        if (res.type == 2) {
            res.data.forEach((item: any) => {
                formData.value.welcome.attachment.push({
                    type: 1,
                    media_content_id: item.id
                });
                fileList.value.push({ ...item, ...{ type: 1 } });
                fileInfo.value.push({
                    id: item.id,
                    cur_icon: '/static/file/pic.png',
                    name: item.file_name
                });
            });
        }
        // 音频
        if (res.type == 3) {
            res.data.forEach((item: any) => {
                formData.value.welcome.attachment.push({
                    type: 4,
                    media_content_id: item.id
                });

                item.cur_icon = '/static/file/mp3.png';
                fileList.value.push({ ...item, ...{ type: 4 } });
                fileInfo.value.push({
                    id: item.id,
                    cur_icon: '/static/file/mp3.png',
                    name: item.file_name
                });
            });
        }
        // 视频
        if (res.type == 4) {
            res.data.forEach((item: any) => {
                formData.value.welcome.attachment.push({
                    type: 2,
                    media_content_id: item.id
                });
                fileList.value.push({ ...item, ...{ type: 2 } });
                fileInfo.value.push({
                    id: item.id,
                    cur_icon: '/static/file/mov.png',
                    name: item.file_name
                });
            });
        }
        // 文件
        if (res.type == 5) {
            res.data.forEach((item: any) => {
                formData.value.welcome.attachment.push({
                    type: 5,
                    media_content_id: item.id
                });
                item.name = item.mediaFileInfo.name;
                fileList.value.push({ ...item });
                fileInfo.value.push({
                    id: item.id,
                    cur_icon: onURL(item.mediaFileInfo.url),
                    name: item.name
                });
            });
        }
        // 链接
        if (res.type == 6) {
            res.data.forEach((item: any) => {
                formData.value.welcome.attachment.push({
                    type: 3,
                    media_content_id: item.id
                });
                fileList.value.push({ ...item, ...{ type: 3 } });
                fileInfo.value.push({
                    id: item.id,
                    cur_icon: '/static/file/link.png',
                    name: item.title
                });
            });
        }
    }
};

// 打开上传
const onOpenUpload = (num: string) => {
    if (props.pageType == 'look') return;
    ZWMatericalLibRef.value.materVisible = true;
    ZWMatericalLibRef.value.baseId = num; //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length); //打开对应的基础素材
};
// 删除上传的文件
const onRemove = (id: any) => {
    if (props.pageType == 'look') return;

    fileList.value = fileList.value?.filter((item: any) => item.id != id);
    fileInfo.value = fileInfo.value?.filter((item: any) => item.id != id);
    formData.value.welcome.attachment = formData.value.welcome.attachment?.filter(
        (item: any) => item.media_content_id != id
    );
    formData.value.welcome.attachment = formData.value.welcome.attachment?.filter(
        (item: any) => item.media_file_id != id
    );
    formData.value.welcome.local_link = formData.value.welcome.local_link?.filter((item: any) => item.link_title != id);
    formData.value.welcome.local_content = formData.value.welcome.local_content?.filter((item: any) => item.id != id);
};
// 已有欢迎语
// 弹框配置项
const tableData = ref([]); //已有欢迎语数据
const seleItem = ref({
    id: '',
    content: '',
    welcome_friend_attachment: []
}); // 选中的欢迎语数据
const multipleTable = ref<any>(null);
// 选择已有素材取消
const cancelHandel = () => {
    appDialog.visible = false;
};
const onWelcome = (data?: any) => {
    getChannelFriendList();
    appDialog.visible = true;
};
// 选择已有素材确认
const submitHandel = () => {
    formData.value.welcome = {
        type: 3,
        content: '',
        attachment: [],
        local_link: [],
        local_content: []
    };
    fileList.value = [];
    fileInfo.value = [];
    const { content, welcome_friend_attachment } = seleItem.value;
    if (welcome_friend_attachment.length + formData.value.welcome.attachment.length > 8) {
        ElMessage.error('最多只能上传8个素材,请删除后再上传');
        return;
    }
    cancelHandel();
    formData.value.welcome.content = content;
    welcome_friend_attachment.forEach((item: any) => {
        if (item.type != 3) {
            formData.value.welcome.attachment.push({
                type: item.type,
                media_content_id: item.content_id
            });
            fileList.value.push({ ...item.media_file, type: item.type });
            // 图片
            if (item.type == 1) {
                fileInfo.value.push({
                    id: item.content_id,
                    cur_icon: '/static/file/pic.png',
                    name: item.media_file.name
                });
            }
            // 视频
            if (item.type == 2) {
                fileInfo.value.push({
                    id: item.content_id,
                    cur_icon: '/static/file/mov.png',
                    name: item.media_file.name
                });
            }
            // 音频
            if (item.type == 4) {
                fileInfo.value.push({
                    id: item.content_id,
                    cur_icon: '/static/file/mp3.png',
                    name: item.media_file.name
                });
            }
            // 文件
            if (item.type == 5) {
                fileInfo.value.push({
                    id: item.content_id,
                    cur_icon: onURL(item.media_file.url),
                    name: item.media_file.name
                });
            }
        } else {
            formData.value.welcome.local_link.push({
                type: 3,
                media_content_id: item.content_id
            });
            fileList.value.push({ ...item.media_content_link, id: item.content_id });
            fileInfo.value.push({
                id: item.content_id,
                cur_icon: '/static/file/link.png',
                name: item.link_title
            });
        }
    });
};

// 单选欢迎语
const handleCurrentChange = (selection: any) => {
    seleItem.value = selection;
};
const appDialog = reactive({
    visible: false,
    title: '选择已有欢迎语',
    width: '1200px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
});
// 获取已有素材文件列表
const getChannelFriendList = (data?: any) => {
    channelFriendList({
        page: 1,
        page_size: data?.page_size || 15,
        ...data
    }).then((res: any) => {
        tableData.value = res.data;
        store.dispatch('pageTotal', res.total);
    });
};
// 分时段欢迎语
const addTime = () => {
    formData.value.time_welcome.push({});
};
// 删除
const handleDel = (index: number) => {
    formData.value.time_welcome.splice(index, 1);
    ElMessage.success('删除成功');
};
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const picIndex = ref(0);
// 删除图片
const handleRemove: UploadProps['onRemove'] = () => {
    formData.value.link_img = '';
};
// 图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
};
// 上传图片
const handleChange: UploadProps['onChange'] = async (file: any) => {
    if (file.size / 1024 / 1024 > 10) {
        ElMessage.error('上传图片大小不能超过10M');
        return false;
    }
    const res = await uploadFile2({
        file: file.raw,
        fileName: file.name
    });
    formData.value.link_img = res.url;
};
const onLookData = (val: any) => {
    onName();
    val?.forEach((item: any) => {
        // 图片

        if (item.type != 3) {
            if (item.content_id != 0) {
                formData.value.welcome.attachment.push({
                    type: item.type,
                    media_content_id: item.content_id
                });
            } else {
                formData.value.welcome.local_content.push({
                    type: item.type,
                    code: item.media_file.code
                });
            }
            if (item.type == 1) {
                fileInfo.value.push({
                    id: item.content_id ? item.content_id : item.file_id,
                    cur_icon: '/static/file/pic.png',
                    name: item.media_file.name
                });
                fileList.value.push({
                    ...item.media_file,
                    type: item.type,
                    id: item.content_id ? item.content_id : item.file_id
                });
            }
            // 视频
            if (item.type == 2) {
                fileInfo.value.push({
                    id: item.content_id ? item.content_id : item.file_id,
                    cur_icon: '/static/file/mov.png',
                    name: item.media_file.name
                });
                fileList.value.push({
                    ...item.media_file,
                    type: item.type,
                    id: item.content_id ? item.content_id : item.file_id,
                    thumbnail_url: `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
                });
            }

            // 音频
            if (item.type == 4) {
                fileList.value.push({
                    ...item.media_file,
                    type: item.type,
                    id: item.content_id ? item.content_id : item.file_id,
                    cur_icon: '/static/file/mp3.png'
                });
                fileInfo.value.push({
                    id: item.content_id ? item.content_id : item.file_id,
                    cur_icon: '/static/file/mp3.png',
                    name: item.media_file.name
                });
            }
            // 文件
            if (item.type == 5) {
                fileList.value.push({
                    ...item.media_file,
                    type: item.type,
                    id: item.content_id ? item.content_id : item.file_id
                });
                fileInfo.value.push({
                    id: item.content_id ? item.content_id : item.file_id,
                    cur_icon: onURL(item.media_file.url),
                    name: item.media_file.name
                });
            }
        } else {
            // 链接
            if (item.content_id) {
                formData.value.welcome.attachment.push({
                    type: item.type,
                    media_content_id: item.content_id
                });
                fileInfo.value.push({
                    id: item.content_id,
                    cur_icon: '/static/file/link.png',
                    name: item.link_title
                });
                fileList.value.push({
                    ...item.media_content_link,
                    type: item.type,
                    id: item.content_id
                });
            } else {
                formData.value.welcome.local_link.push({
                    link_title: item.link_title,
                    link_url: item.link_url,
                    link_decs: item.link_decs,
                    link_share_image: item.link_share_image
                });
                fileInfo.value.push({
                    id: item.link_title,
                    cur_icon: '/static/file/link.png',
                    name: item.link_title
                });
                fileList.value.push({
                    cover_image_url: item.link_share_image,
                    type: item.type,
                    id: item.link_title
                });
            }
        }
    });
};
// const onLookData = (val: any) => {
//   onName()
//   val?.forEach((item: any) => {
//     // 图片

//     if (item.type != 3) {
//       if (item.content_id != 0) {
//         formData.value.welcome.attachment.push({
//           type: item.type,
//           media_content_id: item.content_id,
//           media_file_id: 0
//         })
//       } else {
//         formData.value.welcome.attachment.push({
//           type: item.type,
//           media_content_id: 0,
//           media_file_id: item.file_id
//         })
//       }
//       if (item.type == 1) {
//         fileInfo.value.push({
//           id: item.content_id ? item.content_id : item.file_id,
//           cur_icon: '/static/file/pic.png',
//           name: item.media_file.name
//         })
//         fileList.value.push({
//           ...item.media_file,
//           type: item.type,
//           id: item.content_id ? item.content_id : item.file_id
//         })
//       }
//       // 视频
//       if (item.type == 2) {
//         fileInfo.value.push({
//           id: item.content_id ? item.content_id : item.file_id,
//           cur_icon: '/static/file/mov.png',
//           name: item.media_file.name
//         })
//         fileList.value.push({
//           ...item.media_file,
//           type: item.type,
//           id: item.content_id ? item.content_id : item.file_id,
//           thumbnail_url: `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
//         })
//       }

//       // 音频
//       if (item.type == 4) {
//         fileList.value.push({
//           ...item.media_file,
//           type: item.type,
//           id: item.content_id ? item.content_id : item.file_id,
//           cur_icon: '/static/file/mp3.png'
//         })
//         fileInfo.value.push({
//           id: item.content_id ? item.content_id : item.file_id,
//           cur_icon: '/static/file/mp3.png',
//           name: item.media_file.name
//         })
//       }
//       // 文件
//       if (item.type == 5) {
//         fileList.value.push({
//           ...item.media_file,
//           type: item.type,
//           id: item.content_id ? item.content_id : item.file_id
//         })
//         fileInfo.value.push({
//           id: item.content_id ? item.content_id : item.file_id,
//           cur_icon: onURL(item.media_file.url),
//           name: item.media_file.name
//         })
//       }
//     } else {
//       // 链接
//       if (item.content_id) {
//         formData.value.welcome.attachment.push({
//           type: item.type,
//           media_content_id: item.content_id,
//           media_file_id: 0
//         })
//         fileInfo.value.push({
//           id: item.content_id,
//           cur_icon: '/static/file/link.png',
//           name: item.link_title
//         })
//         fileList.value.push({
//           ...item.media_content_link,
//           type: item.type,
//           id: item.content_id
//         })
//       } else {
//         formData.value.welcome.local_link.push({
//           link_title: item.link_title,
//           link_url: item.link_url,
//           link_decs: item.link_decs,
//           link_share_image: item.link_share_image
//         })
//         fileInfo.value.push({
//           id: item.link_title,
//           cur_icon: '/static/file/link.png',
//           name: item.link_title
//         })
//         fileList.value.push({
//           cover_image_url: item.link_share_image,
//           type: item.type,
//           id: item.link_title
//         })
//       }
//     }
//   })
// }
watch(
    () => formData.value.welcome.content,
    (newV, oldV) => {
        if (formData.value.welcome.content.length <= 1000) {
            onName();
        } else {
            formData.value.welcome.content = oldV;
        }
    },
    { immediate: true }
);
defineExpose({
    formRef,
    formData,
    AllTags,
    creators,
    onLookData
});
</script>

<style lang="scss" scoped>
.img_box {
    display: grid;
    grid-template-columns: 64px 110px 1fr;
    grid-gap: 20px;
    font-size: 10px;

    .text {
        padding-top: 80px;
    }
}

$num: 2;

@mixin ellips($num) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    line-clamp: $num;
    -webkit-box-orient: vertical;
}

:deep(.el-checkbox) {
    margin-right: 18px;
}

.pop_select_box {
    height: 84px;

    .upload_btn {
        margin-top: 8px;
    }

    .upload_pop {
        background: #fff;
        border-radius: 12px;

        // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item_pop {
            width: 60px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .item_pop_icon {
                width: 40px;
                cursor: pointer;
            }

            .item_pop_name {
                font-size: 14px;
                margin-top: 2px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #1a1918;
            }
        }
    }
}

.container {
    position: relative;
    width: 600px;
    height: 480px;
    background: #f8f8f8;
    border-radius: 4px;

    :deep(.el-textarea__inner) {
        border: none;
        box-shadow: none;
        background-color: #f8f8f8;
        border-bottom: 1px solid #eaeaea;
    }

    .text_btn {
        padding: 5px;
        color: #ff6b00;
    }

    .text_hover {
        position: absolute;
        bottom: 15px;
        left: 15px;
        z-index: 10;
        display: flex;
        cursor: pointer;
        width: 360px;
        padding: 0 12px;
        color: #969696;
        background: #f8f8f8;
        border: 1px solid #d9d9d9;
    }

    .upload_list_box {
        overflow: hidden;
        height: 230px;
    }

    .upload_list {
        .upload_item {
            margin-top: 5px;
            width: 440px;
            height: 32px;
            box-sizing: border-box;
            background: #eaeaea;
            display: flex;
            padding: 0 10px 0 14px;
            align-items: center;

            .file_icon {
                width: 20px;
                height: 20px;
                margin-right: 7px;
            }

            .file_name {
                width: 375px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .del_icon {
                width: 10px;
                height: 10px;
                cursor: pointer;
            }
        }
    }

    .prev_box {
        flex: 1;
        position: absolute;
        right: -480px;
        top: 0;

        .phone_con {
            // justify-content: center;
            position: relative;
            margin: -20px auto;
            width: 244px;
            height: 495px;
            box-sizing: border-box;
            border-radius: 36px;
            border: 9px solid #eef5fe;
            background: url('@/assets/image/channel/phone_bg.png');
            background-size: cover;

            .phone-title {
                position: absolute;
                top: -40px;
                left: 75px;
            }

            .phone_List {
                width: 100%;
                box-sizing: border-box;
                position: absolute;
                top: 48px;
                height: 380px;
                bottom: 48px;
                padding: 7px 10px;

                .bg_friend {
                    // width: 100%;

                    .public_title {
                        font-size: 11px;
                        margin-top: -10px;
                        text-align: center;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                    }

                    .public_time {
                        text-align: center;
                        font-size: 11px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #969696;
                    }

                    .user_con {
                        margin-top: 10px;
                        display: flex;

                        .user_avator {
                            width: 22px;
                            height: 22px;
                            margin-right: 4px;
                        }

                        .friend_main {
                            flex: 1;

                            .user_name {
                                font-size: 12px;
                                margin-top: -8px;
                                font-family: STHeitiSC-Medium, STHeitiSC;
                                font-weight: 500;
                                color: #969696;
                                transform: scale(0.6);
                                transform-origin: left top;
                                margin-bottom: 4px;
                            }

                            .welcomeWords {
                                position: relative;
                                margin-top: -23px;
                                font-size: 12px;
                                color: #969696;
                                line-height: 15px;
                                transform: scale(0.6);
                                transform-origin: left top;
                                width: 160px;
                                box-sizing: border-box;
                                height: 67px;
                                overflow: hidden;
                                padding: 5px 10px;
                                background-color: #fff;
                                border-radius: 5px;

                                @include ellips(4);

                                &::after {
                                    content: '';
                                    position: absolute;
                                    left: -5px;
                                    top: 10px;
                                    width: 0;
                                    height: 0;
                                    border-top: 5px solid transparent;
                                    border-right: 8px solid #fff;
                                    border-bottom: 5px solid transparent;
                                }
                            }

                            .send_image {
                                width: 68px;
                                height: 46px;
                                margin-top: -23px;
                            }

                            .video_list {
                                position: relative;
                                width: 80px;
                                height: 55px;
                                margin-top: -23px;

                                .video_image {
                                    width: 100%;
                                    height: 100%;
                                }

                                .video_play {
                                    width: 15px;
                                    height: 15px;
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%);
                                }
                            }

                            .user_link {
                                // margin-left: 5px;
                                margin-top: -23px;
                                position: relative;
                                width: 151px;
                                height: 65px;
                                box-sizing: border-box;
                                padding: 5px 10px;
                                border-radius: 5px;
                                background: #fff;

                                &::after {
                                    content: '';
                                    position: absolute;
                                    left: -5px;
                                    top: 10px;
                                    width: 0;
                                    height: 0;
                                    border-top: 5px solid transparent;
                                    border-right: 8px solid #fff;
                                    border-bottom: 5px solid transparent;
                                }

                                .user_link_tit {
                                    width: 100%;
                                    font-size: 12px;
                                    font-family: STHeitiSC-Light, STHeitiSC;
                                    font-weight: 300;
                                    color: #000;
                                    transform: scale(0.83);
                                    transform-origin: left top;

                                    @include ellips(2);
                                }

                                .user_link_main {
                                    margin-top: 4px;
                                    display: flex;

                                    .user_link_desc {
                                        width: 110px;
                                        font-size: 12px;
                                        font-family: STHeitiSC-Light, STHeitiSC;
                                        font-weight: 300;
                                        color: #969696;
                                        transform: scale(0.6);
                                        transform-origin: left top;
                                        margin-top: 2px;

                                        @include ellips(3);
                                    }

                                    .user_link_icon {
                                        width: 22px;
                                        height: 22px;
                                    }
                                }
                            }

                            .user_file {
                                position: relative;

                                // margin-left: 5px;
                                margin-top: -23px;
                                width: 150px;
                                height: 48px;
                                box-sizing: border-box;
                                padding: 8px;
                                border-radius: 3px;
                                background: #fff;

                                &::after {
                                    content: '';
                                    position: absolute;
                                    left: -5px;
                                    top: 6px;
                                    width: 0;
                                    height: 0;
                                    border-top: 5px solid transparent;
                                    border-right: 10px solid #fff;
                                    border-bottom: 5px solid transparent;
                                }

                                .user_file_main {
                                    display: flex;

                                    .user_file_desc {
                                        width: 105px;
                                        font-size: 12px;
                                        transform: scale(0.83);
                                        transform-origin: left top;
                                        margin-bottom: 2px;
                                        font-family: STHeitiSC-Light, STHeitiSC;
                                        font-weight: 300;
                                        color: #000;

                                        @include ellips(2);
                                    }

                                    .user_file_icon {
                                        width: 30px;
                                        height: 30px;
                                    }
                                }

                                .user_file_size {
                                    // margin-top: 2px;
                                    font-family: STHeitiSC-Light, STHeitiSC;
                                    font-weight: 300;
                                    color: #969696;
                                    font-size: 12px;
                                    transform: scale(0.6);
                                    transform-origin: left top;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .welc_time_top {
        display: flex;
        align-items: center;
        width: 600px;
        height: 40px;
        font-size: 14px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302db3;
        line-height: 20px;
        background: #fffaf9;

        .radius_left {
            width: 8px;
            height: 8px;
            margin: 0 20px;
            border-radius: 50%;
            background: #ff6b00;
        }
    }

    .welc_content_t {
        display: flex;
        align-items: center;
        margin: 20px 0;

        .welc_color {
            width: 3px;
            height: 18px;
            background: #ff6b00;
            margin-right: 10px;
        }
    }

    .welc_content_c {
        width: 600px;
        height: 103px;
        padding: 0 0 0 10px;
        background: #fff;
        border: 1px solid #eaeaea;

        .check_box {
            display: flex;
            margin-bottom: 6px;
        }
    }
}

.form-staffs {
    display: flex;

    .title {
        margin-right: 12px;
    }

    .staffs {
        &_item {
            height: 22px;
            line-height: 22px;
            margin-right: 6px;

            // padding: 0;
            color: #35383a;
            border: 1px solid #fffaf9;
            border-radius: 1px;
            background: #fffaf9;
        }

        :deep .el-tag .el-icon {
            width: 12px;
            height: 12px;
            color: #fff;
            background: #d9d9d9;
        }

        :deep .el-tag .el-icon svg {
            margin: 0;
        }

        :deep .el-tag .el-tag__close:hover {
            background: #d9d9d9;
        }

        :deep span.el-tag.el-tag--light.staffs_item::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 11px;
            background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
            margin-right: 10px;
        }
    }
}
</style>
